<template>
  <div class="content-panel">
    <draggable
      class="container"
      :list="newList"
      group="form"
      item-key="id"
      animation="300"
      @add="dragDown"
      @end="dragEnd"
      @change="handleDragChange"
    >
      <template #item="{ element, index }">
        <div @click="handleClick(element, index)" :class="['el',{ active: selectFormItem && selectFormItem.id === element.id && showOperate },{ error: element?.hasError === false },]" >
          <!-- <el-form-item> -->
          <element-comps :element="element" />
          <!-- </el-form-item> -->
          <!-- <div :class="['operate', { 'show-operate': currentIndex === index }]"> -->
          <div>
            <el-icon class="icon" @click.stop="removeAt(index)">
              <Delete />
            </el-icon>
          </div>
        </div>
      </template>
      <template #footer v-if="newList.length === 0">
        <el-empty description="点击或拖拽左侧控件至此处" />
      </template>
    </draggable>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";
import draggable from "vuedraggable";
import ElementComps from "./ElementComps.vue";
//import { useFormStore } from '@/stores/form'
import { nanoid } from "nanoid";
//import MoveIcon from '../icons/move.vue'
//import DeleteIcon from '../icons/delete.vue'

/* ts类型定义区域 */

/* 定义数据区域 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const newList = ref([]);
const currentIndex = ref(0);
const showOperate = ref(false);
const selectFormItem = ref(null);
const emits = defineEmits(["currentItemClick"]);
const store = useStore();
//   const formStore = useFormStore()

/* 事件处理区域 */

// 当前点击的组件
const handleClick = (element, index) => {
store.dispatch("form/selectFormItem", element);
  console.log("element", element);
  currentIndex.value = index;
  showOperate.value = true;
  emits("currentItemClick", element);
};

// 监听组件的移动/添加
const handleDragChange = (e) => {
  console.log("e", e);

  if (e.added) {
    // 组件添加
    const element = e.added.element;
    const index = e.added.newIndex;
    element.id = getFormId(); // 使每个组件的字段名都不一样，避免同个组件字段名一样
    handleClick(element, index);
    return;
  }

  if (e.moved) {
    // 组件移动
    const element = e.moved.element;
    const index = e.moved.newIndex;
    handleClick(element, index);
    return;
  }
};

// 移出组件
const removeAt = (index) => {
  newList.value.splice(index, 1);
  emits("currentItemClick", {});
  store.dispatch("form/updateConfig", newList.value);
  //store.commit("updateConfig", newList.value);
  // formStore.updateConfig(newList.value)
};

// 拖拽放下触发
const dragDown = () => {
  console.log("拖拽放下触发", JSON.stringify(newList.value));
  // store.commit("updateConfig", newList.value);
  store.dispatch("form/updateConfig", newList.value);
};

// 拖拽结束
const dragEnd = () => {
  showOperate.value = true;
};


const getSelectedClass = (cp) =>{
      return selectFormItem.value && selectFormItem.value.id === cp.id ?
          'border-left: 4px solid #409eff':''
}

/**
 * 获取表单id
 */
 const getFormId = () => {
  return `form_${new Date().getTime().toString().substring(5)}${Math.round(
    Math.random() * 9000 + 1000
  )}`;
}

/* 监听 */
watch(
  () => store.state.form.config,
  (newVal) => {
    newList.value = newVal;
    console.log("newVal", newVal);
    //   formStore.updateConfig(newVal)
  }
);


watch(
  () => store.state.form.selectFormItem,
  (newVal) => {
    selectFormItem.value = newVal;
    console.log("selectFormItem", newVal);
    //   formStore.updateConfig(newVal)
  }
);

watch(props.list, (newVal) => {
  store.dispatch("form/updateConfig", newVal);
});

watch(
  () => store.state.form.tempConfig,
  (newVal) => {
    newVal.forEach((item) => {
      newList.value.forEach((iten) => {
        if (item.id === iten.id) {
          iten.hasError = item.hasError;
        }
      });
    });

    // newList.value = newVal
  }
);

watch(
  () => store.state.form.currentIndex,
  (newVal) => {
    const element = store.state.form.config[newVal];
    handleClick(element, newVal);
  }
);
/* 生命周期 */
</script>
  
  <style lang="less" scoped>
.content-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  height: calc(100% - 70px);
  box-sizing: border-box;
  margin: 20px 14px 50px;
  padding: 14px;
  background: #fff;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    outline: none;
  }
  .container {
    flex: 1;
    .el {
      display: flex;
      margin: 3px;
      position: relative;
      border: 1px dashed rgba(170, 170, 170, 0.5);
      // background-color: rgba(236, 245, 255, 0.3);
      overflow: hidden;
      min-height: 50px;
      min-width: 50px;
      outline: 1px solid #fff;

      .item {
        margin-bottom: 18px;
      }

      .operate {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        display: none;
        background: #076bb0;

        .icon {
          margin: 5px 5px 0 7px;
        }
      }
      .show-operate {
        display: block;
      }
    }

    .drag-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      color: #8f959e;
      font-size: 16px;
      line-height: 20px;
      padding: 6px 12px;
      background: #f5f6f7;

      .tip-icon {
        width: 20px;
        position: relative;
        bottom: 1px;
        margin-right: 5px;
      }
    }
    .error {
      position: relative;
      border: 1px solid #f54a45;
    }
    .active {
      position: relative;
      // outline: 2px solid #076bb0;
      // border: 1px solid #076bb0;
      outline: 2px solid #076bb0;
      //border-right: 4px solid #076bb0;
    }
  }
}
</style>
  